<template>
  <div :style="{ height, width, zoom }" ref="esEcharts" />
</template>
<script setup lang="ts">
//按需导入需要用到的 vue函数 和 echarts
import { onMounted, onBeforeUnmount, watch, ref } from "vue";
import * as echarts from "echarts";
import { noDataChart } from '@/utils/publicFunctions.ts'


//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
let myChart: echarts.ECharts;
let esEcharts = ref();  // 图表实例
let zoom = ref(1); // 适配缩放级别

const props = defineProps({
  width: { // 宽度
    type: String,
    default: "100%",
  },
  height: { // 高度
    type: String,
    default: "100%",
  },
  options: { // 图表配置
    type: Object,
    default: () => ({}),
    required: true,
  },
});

let options = {
  title: {
    text: '暂无数据',
    x: 'center',
    y: 'center',
    textStyle: {
      fontSize: 14,
      fontWeight: 'normal',
    }
  }
}

watch(props.options, (val) => {
  // 监听父组件传来的数据变化，当前存在Echarts实例重新绘制图表
  console.log(val, "props.options");
  if (Object.getOwnPropertyNames(props.options).length !== 0) {
    // 正常图表
    console.log('正常图表');
    myChart?.setOption(props.options);
  } else {
    // 空图表
    console.log('空图表');
    // myChart?.setOption(options);
    noDataChart(esEcharts.value)
  }
});

//重绘图表函数
const resizeHandler = () => {
  myChart.resize();
};
//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
const debounce = (fun: { (): void; (): void }, delay: number | undefined) => {
  let timer: any;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fun(); // 图表重绘
    }, delay);
  };
};
// 监听窗口大小变化时50毫秒对图表的防抖处理
const cancalDebounce = debounce(resizeHandler, 50);


//页面成功渲染，开始绘制图表
onMounted(() => {
  //配置为 svg 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 Canvas
  myChart = echarts.init(esEcharts.value, { renderer: "svg" });
  console.log(props.options, '图表');

  if (Object.getOwnPropertyNames(props.options).length !== 0) {
    // 正常图表
    console.log('正常图表');
    myChart?.setOption(props.options);
  } else {
    // 空图表
    console.log('空图表');
    // myChart?.setOption(options);
    noDataChart(esEcharts.value)
  }
  // myChart.setOption(options);

  //自适应不同屏幕时改变图表尺寸
  window.addEventListener("resize", cancalDebounce);

  // 不同适配下的缩放级别
  zoom.value = 1 / document.documentElement.style.zoom
  window.addEventListener('resize', () => {
    zoom.value = 1 / document.documentElement.style.zoom
  })
});

//页面销毁前，销毁事件和实例
onBeforeUnmount(() => {
  window.removeEventListener("resize", cancalDebounce);
  myChart.dispose();
});

defineExpose({ cancalDebounce }); // 暴露图表变换防抖处理函数
</script>
